import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <div v-show="active" v-text="'Text: ' + text"></div>
      <div v-if="active">if content</div>
      <div v-else-if="text === 0">else if content</div>
      <div v-else> else content</div>
      <div v-html="html"></div>
      <ul>
        <li v-for="(item, index) in arr" :key="item"> {{item}}:{{index}}</li>
      </ul>
      <ul>
      <li v-for="(val, key, index) in obj"> {{val}}:{{key}}:{{index}}</li>
      </ul>
      <div v-on:click="clicked">点击</div>
      <div :style="style">color</div>
      <div>Text: {{text}}</div>
      <input text="text" v-model="text">
      <div>
      <input type="checkbox" :value="1" v-model="arr">
      <input type="checkbox" :value="2" v-model="arr">
      <input type="checkbox" :value="3" v-model="arr">
      <input type="radio" value="one" v-model.lazy="picked">
      <input type="radio" value="two" v-model="picked">
      <div v-pre>Text: {{text}}</div>
      <div v-cloak>Text {{text}}</div>
      <div v-once>text {{text}}<div>
      </div>
    </div>
  `,
  data: {
    picked: '',
    obj: {
      a: '123',
      b: '456',
      c: '789'
    },
    arr: [1, 2, 3],
    text: 0,
    active: false,
    html: '<span>this is html</span>',
    style: {
      color: 'red'
    }
  },
  methods: {
    clicked () {
      console.log('clicked')
    }
  }
})
